---
title: BoutonConnecter
description: Utiliser et personnaliser le BoutonConnecter
---

# BoutonConnecter

## Utiliser et personnaliser le BoutonConnecter

Ceci est le composant principal. Il est responsable de l'affichage du bouton de connexion/déconnexion, ainsi que de l'interface utilisateur pour le changement de chaîne.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> Note : Assurez-vous que votre application est enveloppée dans les fournisseurs nécessaires. [En savoir plus](/docs/installation#wrap-providers).

### Props

Le composant `BoutonConnecter` expose plusieurs props pour personnaliser son apparence, y compris la possibilité de modifier la visibilité de différents éléments.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'Connecter le portefeuille',
      type: 'string',
      description: 'Le texte affiché sur le bouton Connecter',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "Si l'avatar et/ou l'adresse du compte actif est affiché",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "Si l'icône et/ou le nom de la chaîne actuelle est affiché, ou entièrement caché",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        "Si le solde est visible à côté du nom du compte",
    },
  ]}
/>

> Note : le point de rupture intégré `grandÉcran` est de `768px`.

### Exemples

#### Étiquette

Utilisez la prop `label` pour définir un texte personnalisé pour `BoutonConnecter`.

```tsx
<ConnectButton label="__Sign in__" />
```

#### Statut du compte

Voici quelques différentes manières d'utiliser la prop `accountStatus`.

Afficher uniquement l'avatar du compte.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

Afficher uniquement l'adresse du compte.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### Statut de la chaîne

Voici quelques différentes manières d'utiliser la prop `chainStatus`.

Afficher uniquement l'icône de la chaîne actuelle.

```tsx
<ConnectButton chainStatus="__icon__" />
```

Afficher uniquement le nom de la chaîne actuelle.

```tsx
<ConnectButton chainStatus="__name__" />
```

Masquer complètement l'interface utilisateur de la chaîne.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### Afficher le solde

Utilisez la prop `showBalance` pour masquer/afficher le solde.

Masquer le solde.

```tsx
<ConnectButton showBalance={__false__} />
```

#### Responsive

Ces props peuvent également être définies dans un format réactif.

Sur les petits écrans, n'afficher que l'icône du compte. Mais sur les grands écrans, afficher l'icône et l'adresse.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

Sur les petits écrans, masquer le solde. Mais sur les grands écrans, l'afficher.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
